<template>
  <div>
    <el-table :data="tableList" style="width: 100%" :height="height">
      <el-table-column prop="name" label="商品信息" width="550">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" class="secTitle">
            <el-avatar :size="50" :src="scope.row.img_show" shape="square" />
            <span>{{ scope.row.name }}</span>
            <span>拼团号：{{ scope.row.no }}</span>
            <span>单价：{{ scope.row.singlePrice }}</span>
          </div>
          <template v-else>
            <div class="d-flex-column">
              <div v-for="(secItem, index) of scope.row.commodity" :key="index" style="width: 70%">
                <div class="secTitle">
                  <p>订单号:{{ secItem.order_no }}</p>
                </div>
              </div>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="specification" label="用户" width="300">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)">
            <span>应拼3人，</span>
            <span>已拼2人</span>
            <span>剩余时间10:20:02</span>
          </div>
          <template v-else>
            <div v-for="(secItem, index) of scope.row.commodity" :key="index" class="d-flex-center">
              <div class="left" style="width: 50px;margin-right: 15px">
                <el-avatar :size="50" :src="secItem.img" shape="square" />
              </div>
              <div class="right">
                <p>{{ secItem.bookname }}</p>
                <p style="color: red">{{ secItem.owner }}</p>
              </div>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="pay" label="实付款" width>
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <template v-else>
            <div v-for="(secItem, index) of scope.row.commodity" :key="index">
              <div>￥{{ secItem.price * secItem.number }}</div>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="shop" label="下单时间" width>
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else class="shop-wrapper">
            <div v-for="(secItem, index) of scope.row.commodity" :key="index">
              <div>{{ secItem.created_at }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)">
            <el-button type="primary" @click="showOrderDetail">订单详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-detail ref="orderDetail" />
  </div>
</template>
<script>
import OrderDetail from './order-detail'
export default {
  components: {
    OrderDetail
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      height: 0,
      dialogVisible: false,
      orderDetail: {},
      tableList: [
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        },
        {
          id: 117,
          no: 'NO20200413160246_3592',
          pay_at: '2020-04-13 16:03:11',
          created_at: '2020-04-13 16:02:46',
          clerk: '韓宏昌',
          img_show: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/20fda68ac3f5db32805e59dd571033ef844d2e19.jpg',
          name: '架子鼓的进阶史架子鼓',
          singlePrice: '￥149.00',
          payment: 400,
          commodity: [
            {
              number: 1,
              price: 400,
              img: 'http://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/81dab3a1b0acae478e9e99ab77e1eefcee45f859.png',
              name: '全自动摩托车专用机油',
              spec_name: '',
              commodity_spu_id: 88,
              ietm_no: 'Z2004102481',
              cost: 300,
              order_no: 'NO20200413160246_3592',
              bookname: '红颜',
              owner: '拼主',
              created_at: '2020-4-21'
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.resitHeight()
    })
  },
  methods: {
    showOrderDetail() {
      this.$refs.orderDetail.show()
    },
    deleteItem(scope) {
    },
    detail(scope) {
      console.log(scope)
      this.dialogVisible = true
    },
    showSecTitle(index) {
      return (index % 2 === 0)
    },
    handleCloseDialog() {
      this.dialogVisible = false
    },
    resitHeight() {
      this.height = document.body.clientHeight - 305
      window.onresize = () => {
        this.height = document.body.clientHeight - 305
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .detail {
    color: #1baab0;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell {
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .el-avatar {
    margin-right: 15px;
  }
}
.el-table /deep/ .el-table__row:nth-child(odd) {
  td{
    height: 20px;
    padding: 0;
    background: #FAFAFA;
  }
}
.secTitle{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p{
    white-space: nowrap;
  }
}
.shop-wrapper{
  display: flex;
  align-items: center;
}
.del{
  color: #f56c6c;
  margin-left: 10px;
  cursor: pointer;
}
.d-flex-column{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.d-flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-table{
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
</style>
